<template>
  <div class="content-analytics">
    <a-row :gutter="[16, 16]">
      <!-- 内容概览 -->
      <a-col :span="6" v-for="stat in contentStats" :key="stat.title">
        <a-card>
          <a-statistic
            :title="stat.title"
            :value="stat.value"
            :precision="stat.precision || 0"
            :suffix="stat.suffix"
          />
        </a-card>
      </a-col>

      <!-- 阅读量趋势 -->
      <a-col :span="24">
        <a-card title="阅读量趋势">
          <div ref="readingTrendChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 分类分布 -->
      <a-col :span="12">
        <a-card title="小说分类分布">
          <div ref="categoryChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 热门标签 -->
      <a-col :span="12">
        <a-card title="热门标签">
          <div ref="tagCloud" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 热门作品排行 -->
      <a-col :span="24">
        <a-card title="热门作品排行">
          <a-table :columns="columns" :data-source="topNovels" :pagination="{ pageSize: 10 }">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'trend'">
                <span :style="{ color: record.trend > 0 ? '#f5222d' : '#52c41a' }">
                  {{ record.trend > 0 ? '+' : '' }}{{ record.trend }}%
                </span>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'ContentAnalytics',
  setup() {
    const contentStats = ref([
      { title: '总作品数', value: 12580 },
      { title: '总字数', value: 125800000, suffix: '字' },
      { title: '日均更新', value: 256 },
      { title: '月均新增', value: 7890 }
    ])

    const columns = [
      { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
      { title: '作品名称', dataIndex: 'title', key: 'title' },
      { title: '作者', dataIndex: 'author', key: 'author', width: 120 },
      { title: '分类', dataIndex: 'category', key: 'category', width: 100 },
      { title: '阅读量', dataIndex: 'reads', key: 'reads', width: 120 },
      { title: '趋势', dataIndex: 'trend', key: 'trend', width: 100 }
    ]

    const topNovels = ref([
      {
        rank: 1,
        title: '玄幻小说一号',
        author: '作者A',
        category: '玄幻',
        reads: 125800,
        trend: 12
      },
      // ... 更多数据
    ])

    const readingTrendChart = ref(null)
    const categoryChart = ref(null)
    const tagCloud = ref(null)

    onMounted(() => {
      initReadingTrendChart()
      initCategoryChart()
      initTagCloud()
    })

    const initReadingTrendChart = () => {
      const chart = echarts.init(readingTrendChart.value)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      })
    }

    // 其他图表初始化方法...

    return {
      contentStats,
      columns,
      topNovels,
      readingTrendChart,
      categoryChart,
      tagCloud
    }
  }
})
</script>

<style scoped>
.content-analytics {
  padding: 24px;
}
</style> 